<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<!-- 查询条件 -->
			<el-form ref="queryFormRef" :model="state.queryForm" :inline="true">
				<el-form-item label="账户" prop="username">
					<el-input v-model="state.queryForm.username" placeholder="请输入账户" clearable />
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="state.queryForm.nickname" placeholder="请输入昵称" clearable />
				</el-form-item>
				<el-form-item label="姓名" prop="realname">
					<el-input v-model="state.queryForm.realname" placeholder="请输入姓名" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Search" :loading="state.loading" @click="getTableData">查询</el-button>
					<el-button icon="ele-Refresh" :loading="state.loading" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<!-- 功能按钮 -->
			<div class="system-user-btn mb15">
				<el-button type="primary" icon="ele-FolderAdd" class="ml10" @click="userFormRef.openDialog()">新增</el-button>
			</div>

			<!-- 数据列表 -->
			<el-table :data="state.dataList" v-loading="state.loading" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="60" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="username" label="账户" show-overflow-tooltip />
				<el-table-column prop="avatar" label="头像" show-overflow-tooltip />
				<el-table-column prop="nickname" label="昵称" show-overflow-tooltip />
				<el-table-column prop="realname" label="姓名" show-overflow-tooltip />
				<el-table-column prop="sex" label="性别" show-overflow-tooltip width="80" />
				<el-table-column prop="birthday" label="生日" show-overflow-tooltip />
				<el-table-column prop="email" label="邮箱" show-overflow-tooltip />
				<el-table-column prop="phone" label="手机号" show-overflow-tooltip />
				<el-table-column prop="status" label="状态" show-overflow-tooltip width="80">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
						<el-tag type="info" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<!-- 修改按钮 -->
						<el-button size="small" type="primary" text :disabled="scope.row.username === 'admin'" @click="userFormRef.openDialog(scope.row.id)"
							>修改</el-button
						>
						<!-- 删除按钮 -->
						<el-popconfirm
							:title="`此操作将永久删除账户名称：“${scope.row.username}”，是否继续?`"
							width="230"
							@confirm="handleDelete([scope.row.id])"
						>
							<template #reference>
								<el-button size="small" type="primary" text :disabled="scope.row.username === 'admin'">删除</el-button>
							</template>
						</el-popconfirm>
						
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination
				class="mt15"
				v-model:current-page="state.pagination.current"
				v-model:page-size="state.pagination.size"
				:total="state.pagination.total"
				:page-sizes="state.pagination.pageSizes"
				:layout="state.pagination.layout"
				@change="handlePaginationChange"
			>
			</el-pagination>
		</el-card>

		<!-- 表单 -->
		<UserForm ref="userFormRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserApi } from '/@/api/system/user';

// 动态引入组件
const UserForm = defineAsyncComponent(() => import('./form.vue'));

// 用户表单引用
const userFormRef = ref();
// 表格查询引用
const queryFormRef = ref();
// 定义变量内容
const state = reactive({
	// 条件查询参数
	queryForm: {
		username: null,
		nickname: null,
		realname: null,
	},
	// table加载状态
	loading: false,
	// table数据列表
	dataList: [],
	// table选中数据
	selectionRows: [],
	// 分页组件属性配置
	pagination: {
		current: 1,
		size: 10,
		total: 0,
		pageSizes: [10, 30, 50, 100, 300],
		layout: '->, total, prev, pager, next, sizes, jumper',
	},
});

// 初始化表格数据
const getTableData = () => {
	state.loading = true;
	useUserApi()
		.list({
			...state.queryForm,
			current: state.pagination.current,
			size: state.pagination.size,
		})
		.then((res) => {
			if (res.code == 200) {
				state.dataList = res.data.records;
				state.pagination.total = res.data.total;
			}
			state.loading = false;
		});
};

// 删除用户
const handleDelete = (ids: object) => {
	useUserApi()
		.del(ids)
		.then((res) => {
			if (res.code == 200) {
				ElMessage.success('删除成功');
				getTableData();
			}
		});
};

// 分页改变
const handlePaginationChange = (currentPage: number, pageSize: number) => {
	state.pagination.size = pageSize;
	state.pagination.current = currentPage;
	getTableData();
};

// table多选事件
const handleSelectionChange = (val: any) => {
	state.selectionRows = val;
	console.log('当前选择内容：', state.selectionRows);
};

// 清空搜索条件
const resetQuery = () => {
	queryFormRef.value?.resetFields();
	getTableData();
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
